<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>采空区地质封存选址分析系统</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <nav class="navbar">
        <ul class="nav-menu">
            <li>工程管理</li>
            <li>数值模拟分析</li>
            <li>支护参数设计</li>
            <li>数据查询</li>
            <li>退出系统</li>
        </ul>
    </nav>

    <div class="container">
        <!-- 查询区域 -->
        <div class="query-section">
            <div class="query-controls">
                <select id="project-select">
                    <option value="">选择巷道名称</option>
                    <option value="xuzhuang">徐庄矿</option>
                    <option value="other">其他巷道</option>
                </select>
                <button class="btn btn-primary" id="query-btn">查询</button>
            </div>
        </div>

        <!-- 数据展示区域 -->
        <div class="data-section">
            <!-- 参数表格 -->
            <div class="parameters-table">
                <div class="table-header">巷道基础参数</div>
                <div class="table-content">
                    <div class="parameter-row">
                        <span class="parameter-name">最大单轴抗压强度</span>
                        <span class="parameter-value">35.2 MPa</span>
                    </div>
                    <div class="parameter-row">
                        <span class="parameter-name">直接顶厚度</span>
                        <span class="parameter-value">4.8 m</span>
                    </div>
                    <div class="parameter-row">
                        <span class="parameter-name">巷道埋深</span>
                        <span class="parameter-value">612 m</span>
                    </div>
                    <div class="parameter-row">
                        <span class="parameter-name">采高</span>
                        <span class="parameter-value">3.2 m</span>
                    </div>
                </div>
            </div>

            <!-- 详情面板 -->
            <div class="detail-panel">
                <div class="detail-header">巷道详细参数</div>
                <div class="detail-item">
                    <label for="tunnel-name">巷道名称</label>
                    <input type="text" id="tunnel-name" value="徐庄矿" readonly>
                </div>
                <div class="detail-item">
                    <label for="mining-height">采高 (m)</label>
                    <input type="number" id="mining-height" value="3.2" step="0.1">
                </div>
                <div class="detail-item">
                    <label for="tunnel-width">巷道宽度 (m)</label>
                    <input type="number" id="tunnel-width" value="5.4" step="0.1">
                </div>
                <div class="detail-item">
                    <label for="burial-depth">巷道埋深 (m)</label>
                    <input type="number" id="burial-depth" value="612" step="1">
                </div>
            </div>
        </div>

        <!-- 进度指示器 -->
        <div class="progress-container">
            <div class="progress-bar">
                <div class="progress-fill" id="progress-fill" style="width: 0%"></div>
            </div>
            <div class="progress-text" id="progress-text">评估进度: 0/18</div>
        </div>

        <!-- 表单容器 -->
        <div id="form-container">
            <form id="assessment-form">
                <!-- 指标表单将通过JavaScript动态生成 -->
            </form>
        </div>

        <!-- 分析结论区域 -->
        <div class="conclusion-section">
            <div class="conclusion-header">分析结论</div>
            <div class="conclusion-content">
                <div class="conclusion-box">
                    <div class="conclusion-title">围岩稳定性分类</div>
                    <div class="conclusion-text" id="stability-class">待评估</div>
                </div>
                <div class="conclusion-box">
                    <div class="conclusion-title">顶板支护形式建议</div>
                    <div class="conclusion-text" id="support-suggestion">待评估</div>
                </div>
            </div>
        </div>

        <!-- 导航按钮 -->
        <div class="navigation-buttons">
            <button class="btn btn-secondary" id="prev-btn" disabled>上一项</button>
            <button class="btn btn-primary" id="next-btn">下一项</button>
            <button class="btn btn-primary" id="submit-btn" style="display: none;">提交评估</button>
            <button class="btn btn-secondary" id="restart-btn" style="display: none;">重新评估</button>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>
